<template>
  <div>
    <h2>学生信息</h2>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>班级</th>
          <th>专业</th>
          <th>院系</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="student in students" :key="student.id">
          <td>{{ student.id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.gender }}</td>
          <td>{{ student.age }}</td>
          <td>{{ student.class }}</td>
          <td>{{ student.major }}</td>
          <td>{{ student.department }}</td>
          <td>
            <a href="#" @click.prevent="checkStudent(student.id)">查看</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        {
          id: '160341',
          name: '王五',
          gender: '女',
          age: 21,
          class: '信管1601',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        {
          id: '170340',
          name: '张三',
          gender: '男',
          age: 20,
          class: '计科1701',
          major: '计算机',
          department: '商贸学院'
        },
        {
          id: '170339',
          name: '李四',
          gender: '男',
          age: 20,
          class: '计科1701',
          major: '计算机',
          department: '商贸学院'
        },
        {
          id: '170343',
          name: '陈留',
          gender: '男',
          age: 21,
          class: '计科1701',
          major: '计算机',
          department: '商贸学院'
        },
        {
          id: '160342',
          name: '盛祎琛',
          gender: '女',
          age: 19,
          class: '信管1602',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        {
          id: '160343',
          name: '闫玉平',
          gender: '女',
          age: 20,
          class: '信管1601',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        {
          id: '160344',
          name: '陈淑婷',
          gender: '女',
          age: 20,
          class: '信管1601',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        {
          id: '160345',
          name: '周梦琪',
          gender: '女',
          age: 20,
          class: '信管1601',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        {
          id: '160346',
          name: '曾智',
          gender: '女',
          age: 20,
          class: '信管1601',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        {
          id: '160347',
          name: '百鬼丸',
          gender: '男',
          age: 20,
          class: '信管1601',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        // 新增10条学生信息
        {
          id: '160348',
          name: '赵六',
          gender: '男',
          age: 22,
          class: '信管1602',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        {
          id: '160349',
          name: '孙七',
          gender: '女',
          age: 21,
          class: '信管1601',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        {
          id: '160350',
          name: '周八',
          gender: '男',
          age: 20,
          class: '计科1702',
          major: '计算机',
          department: '商贸学院'
        },
        {
          id: '160351',
          name: '吴九',
          gender: '女',
          age: 19,
          class: '信管1603',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        {
          id: '160352',
          name: '郑十',
          gender: '男',
          age: 21,
          class: '计科1701',
          major: '计算机',
          department: '商贸学院'
        },
        {
          id: '160353',
          name: '王十一',
          gender: '女',
          age: 20,
          class: '信管1602',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        {
          id: '160354',
          name: '钱十二',
          gender: '男',
          age: 22,
          class: '计科1703',
          major: '计算机',
          department: '商贸学院'
        },
        {
          id: '160355',
          name: '刘十三',
          gender: '女',
          age: 21,
          class: '信管1601',
          major: '信息管理与信息系统',
          department: '商贸学院'
        },
        {
          id: '160356',
          name: '李十四',
          gender: '男',
          age: 20,
          class: '计科1702',
          major: '计算机',
          department: '商贸学院'
        },
        {
          id: '160357',
          name: '陈十五',
          gender: '女',
          age: 19,
          class: '信管1603',
          major: '信息管理与信息系统',
          department: '商贸学院'
        }
      ]
    };
  },
  methods: {
    checkStudent(){
      this.$router.push({
        path:"/sc/student/Details",
        query:{id:1}
      })
    }

  }
};
</script>

<style scoped>
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

a {
  color: blue;
  text-decoration: none;
  margin-right: 10px;
}
</style>